<template>
  <div class="search-box">
    <div class="search">
      <el-input
        :placeholder="$t('tips.searchTip')"
        @change="search"
        v-model="state.search"
      >
        <template #prepend>
          <img src="@/assets/images/search.png" alt class="search-icon" />
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  emits: ["search"],
  setup(props, ctx) {
    const state = reactive({
      search: ""
    });
    const search = value => {
      ctx.emit("search", value);
    };
    return {
      state,
      search
    };
  }
};
</script>

<style scoped lang="less">
.search-box {
  width: 100%;
}
.search /deep/ .el-input__inner {
  border: none;
  background: #f8f8f8;
  height: 42px;
  .el-input-group__prepend {
    border: none;
  }
}
.search /deep/ .el-input-group__prepend {
  border: none;
  background: #f8f8f8;
}
</style>
